<template>
  <div>
    {{message}}
    <MyLabel @child-event="parentEvent" title="天气预报"
             container="天气晴，温度10～20">
      <template v-slot:default><div>插槽1</div></template>
      <template v-slot:one = 'parentValue'> 子solt传的默认值: {{parentValue.value1}},{{parentValue.value2}} </template>

    </MyLabel>
    <button @click="clickMe(1)" v-bind:class="{active:isActive}"
            v-bind:style="{fontSize: fontSize + 'px' }">点击我</button>
  </div>
</template>

<script>
  import MyLabel from './my-label';
  export default {
    name: "index",
    data() {
      return {
        message: 'hello vue',
        isActive: true,
        fontSize: 10,
        id: 0,
      }
    },
    components: {MyLabel},
    methods:{
      clickMe(key){
        this.fontSize=this.fontSize+key;
        alert("我出来了"+key)
      },
      parentEvent(data){
        this.fontSize=this.fontSize+data;
      }
    },
    created() {

      this.id = this.$route.params.id;
      console.info(this.id);
    }
  }
</script>

<style scoped>
  .active {
    height: 50px;
    width: 200px;
    background: antiquewhite 2px;
  }

</style>
